<template>
<div class="content-wrapper">
    <common-title title="线索推送排行" imgSrc="../../../../src/assets/img/left-bottom.png"></common-title>>
    <div class="chart-wrapper" ref="useChart">
    </div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import commonTitle from './commonTitleBottom.vue';
import { onMounted, ref } from 'vue';
import  { getScan } from  '../../../api/index'
const useChart = ref<HTMLDivElement>()
onMounted(()=>{
  let a =  "u7NbzWVam1ygYSuMc/FM9QXDRlkW5wGPHIhDB8oF+kCB/BASO+LRYoOjpLBQl4BSkSPm2tAEbD0NVvtZXdVI3jbhQPXCsq+y5844iRiGJyZKWlEZKbl/hX1dmk5l9aefUQfmfB0+3WfKEkJYBjpE0Ed/vZf8MM25DbE7M/HrfbRnl2W1esuOBSeBVa8CiI4LJITUswmzN22UcobBpoy98I3g/RXzA+sio71skLyCt1xcNQ09mdNcFVledUI1i4pC"
    getScan({param: a})
    var myChart = echarts.init(useChart.value as HTMLDivElement);
    var option;

    option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center',
        textStyle:{
            color:'#fff'
        }
    },
    series: [
        {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
        }
    ]
    };

    option && myChart.setOption(option);
    window.addEventListener('resize',()=>{
        myChart.resize()
    })

})
</script>
<style lang="scss" scoped>
.content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .chart-wrapper {
       flex: 1;
       width: 100%;
    }
}
</style>
